<template>
  <div style="padding: 30px">
    <div style="margin: 20px 0px;">
      <el-alert :closable="false" title="表单预览">
        <router-view />
      </el-alert>
    </div>
    <el-form ref="emForm" :model="formInfo" label-width="120px" size="small">
      <el-input v-model="formInfo.id" type="hidden" />
      <el-form-item label="记录名称" prop="name" :rules="{ required: true, message: '不能为空', trigger: 'blur' }">
        <el-input v-model="formInfo.name" style="width:80%" />
      </el-form-item>
      <template v-for="(domain, index) in formInfo.fields">
        <el-form-item :key="domain.id" :label="domain.name" :prop="'fields.' + index + '.value'" :rules="{ required: domain.required, message: domain.name + '不能为空', trigger: 'blur' }">
          <el-input v-if="domain.type === 'TEXT'" v-model="domain.value" style="width:80%" />
          <el-input-number v-if="domain.type === 'NUMBER'" v-model="domain.value" style="width:120px;" />
          <el-switch v-if="domain.type === 'SWITCH'" v-model="domain.value" active-color="#13ce66" inactive-color="#aaaaaa" />
          <el-input v-if="domain.type === 'TEXTAREA'" v-model="domain.value" type="textarea" style="width:80%" :rows="1" />
          <el-select v-if="domain.type === 'SELECT'" v-model="domain.value" placeholder="请选择">
            <el-option v-for="item in domain.options" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
          <el-checkbox-group v-if="domain.type === 'CHECKBOX'" v-model="domain.value">
            <el-checkbox v-for="item in domain.options" :key="item.value" :name="domain.name" :label="item.name" :value="item.value" />
          </el-checkbox-group>
          <el-date-picker v-if="domain.type === 'DATE'" v-model="domain.value" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
          <el-date-picker v-if="domain.type === 'DATETIME'" v-model="domain.value" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" />
          <el-upload
            v-if="domain.type === 'FILE'"
            :action="uploadUrl"
            :file-list="domain.value"
            :name="'file'"
            :on-success="(res, file, fileList)=>{return onUploaded(fileList, index)}"
            :on-remove="(file, fileList)=>{return onRemoved(fileList, index)}"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" @click="onSave">保存</el-button>
        <el-button @click="onCancel">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { convertToData } from '@/utils/form.em'
export default {
  props: {
    formInfo: {
      type: Object,
      default: function() {
        return {}
      }
    },
    uploadUrl: {
      type: String,
      default: '/api/form/upload'
    },
    onSubmit: {
      type: Function,
      default: null
    }
  },
  methods: {
    onSave() {
      this.$refs['emForm'].validate((valid) => {
        if (valid) {
          this.onSubmit(convertToData(Object.assign({}, this.formInfo)))
        } else {
          return false
        }
      })
    },
    onCancel() {
      this.$router.back()
    },
    onUploaded(fileList, index) {
      this.formInfo.fields[index].value = fileList
    },
    onRemoved(fileList, index) {
      this.formInfo.fields[index].value = fileList
    }
  }
}
</script>
